<template>
  <div>
    <div class="carousel">
      <swiper ref="mySwiper" class="swiper-fill" :options="swiperOptions" v-if="carouselList.length">
        <swiper-slide v-for="(item, index) in carouselList" :key="index">
          <div class="video-container">
            <div class="description-container">
              <h1 class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.8s"
                swiper-animate-delay="0.1s">{{ item.title }}</h1>
              <div class="highlight-title ani"
                :style="{ 'text-shadow': `0 0 10px ${item.subtitleColor}, 0 0 20px ${item.subtitleColor}, 0 0 30px ${item.subtitleColor}, 0 0 40px ${item.subtitleColor}` }"
                swiper-animate-effect="fadeInRight" swiper-animate-duration="0.8s" swiper-animate-delay="0.2s">{{
                  item.subtitle }}</div>
              <hr class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.8s"
                swiper-animate-delay="0.3s">
              <p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.8s"
                swiper-animate-delay="0.4s">
                {{ item.description }}</p>
            </div>
          </div>
          <video v-if="item.mediaType == 1" class="background" muted autoplay loop :src="(item.host + item.url)"></video>
          <img v-if="item.mediaType == 0" class="background" :src="(item.host + item.url)" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="fill" style="background: #806e22;" v-else></div>
    </div>
    <!--关于公司-->
    <div class="about">
      <div class="about-us" v-loading="companyLoading">
        <div class="about-company" v-if="company != null">
          <h1>{{ company.name }}</h1>
          <p>{{ company.companyProfile }}</p>
          <div class="about-btns">
            <buttom-url src="/AboutUs">{{ $t('about.title') }}</buttom-url>
          </div>
        </div>
        <div v-if="abouts != null" class="about-prove">
          <ul>
            <li v-for="(item, index) in abouts" :key="index" class="hvr-icon-bounce">
              <a :href="'/AboutUs?id=' + item.id">
                <div class="about-prove-container">
                  <div class="about-prove-icon hvr-icon">
                    <i :class="['fa', item.icon]"></i>
                  </div>
                  <div class="about-prove-describe">
                    <h2>{{ item.title }}</h2>
                    <p>{{ item.content }}</p>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--产品展示-->
    <div class="products">
      <div class="container" v-loading="productLoading">
        <h1 class="products-title">{{ $t('product.title') }}</h1>
        <product-panel :loading="productLoading" :productDirectoryList="productCategoriesList"
          :productList="productList"></product-panel>
      </div>
    </div>
  </div>
</template>

<script>

import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import ProductPanel from "@/components/Product/ProductPanel";
import ButtomUrl from "@/components/Button/ButtomUrl";
import * as swiperAni from "@/assets/js/animate.js";
import * as carouselApi from '@/api/web/carouselApi';
import * as productApi from '@/api/web/productApi';
import * as homeApi from '@/api/web/homeApi';

import "swiper/css/swiper.min.css";
import "@/assets/css/animate.min.css";

export default {
  components: {
    Swiper,
    SwiperSlide,
    ProductPanel,
    ButtomUrl
  },
  data () {
    return {
      swiperOptions: {
        autoplay: {   //自动轮播
          delay: 8000, //自动轮播切换时间间隔
        },
        loop: true,
        speed: 1000,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        effect: "fade",
        on: {
          init: function () {
            swiperAni.swiperAnimateCache(this); //隐藏动画元素 
            swiperAni.swiperAnimate(this); //初始化完成开始动画
          },
          slideChangeTransitionStart: function () {
            swiperAni.swiperAnimate(this); //每个slide开始切换时也运行当前slide动画
          },
        }
      },
      carouselList: [],
      productCategoriesList: [],
      productList: [],
      categoriesId: 0,
      productLoading: true,
      company: null,
      abouts: null,
      companyLoading: true,
    };
  },
  methods: {
    getCompanyInfo () {
      this.companyLoading = true;
      homeApi.getCompanyInfo()
        .then(res => {
          if (res.code == 200) {
            this.company = res.data.company;
            this.abouts = res.data.abouts;
            this.companyLoading = false;
          }
        })
    },
    getCarouselList () {
      carouselApi.getCarousels()
        .then(res => {
          if (res.code == 200) {
            this.carouselList = res.data;
          }
        })
    },
    getAllProductCategorieList () {
      productApi.getAllProductCategorieList()
        .then(res => {
          if (res.code == 200) {
            this.productCategoriesList = res.data;
          }
        })
    },
    initSwiper () {
      // 在nextTick中使用$refs获取mySwiper
      let mySwiper = this.$refs.mySwiper.$swiper;
      swiperAni.swiperAnimateCache(mySwiper);
      swiperAni.swiperAnimate(mySwiper);
    },
    loadProduct () {
      this.productLoading = true;
      productApi.getProductList(this.categoriesId, 0, 100, true)
        .then(res => {
          if (res.code == 200) {
            this.productList = res.data.data;
            this.productLoading = false;
          }
        });
    },
  },
  mounted () {
    this.getCarouselList();
    this.getAllProductCategorieList();
    this.loadProduct();
    this.getCompanyInfo();
  },
};
</script>

<style scoped>
.products {
  padding: 50px;
  background: #e7e7e7;
}

.products .products-title {
  color: #806e22;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
}

.products .products-describe {
  text-align: center;
  font-size: 14px;
  color: #595959;
}

.fill {
  width: 100%;
}

video {
  object-fit: cover;
  width: 100%;
}

.video-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  width: 100%;
}

.swiper-fill img {
  height: 100%;
}

.swiper-fill video {
  height: 100%;
}

.description-container {
  padding: 0px 5%;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.description-container h1,
h2 {
  margin: 0px;
  font-weight: 600;
  /* text-shadow: 0 0 10px #707070, 0 0 10px #707070, 0 0 10px #707070, 0 0 10px #707070; */
}

.description-container hr {
  width: 100%;
  background-color: #dbdbdb80;
  height: 1px;
  border: none;
}

.highlight-title {
  font-size: 4rem;
  margin: 30px 0px;
  font-weight: 600;
  text-shadow: 0 0 10px #806e22, 0 0 20px #806e22, 0 0 30px #806e22, 0 0 40px #806e22;
}

.background {
  position: fixed;
  top: 0;
  z-index: -1;
}

.about {
  padding: 50px 0px;
  border: 1px solid #e9e9e9;
}

.about-us {
  display: flex;
  background-image: url('~@/assets/img/sybj01.png');
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 30px;
}


.about-us .about-company {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.about-us .about-company h1 {
  color: #806e22;
}

.about-us .about-company p {
  color: #595959;
  font-size: 16px;
  line-height: 30px;
}

.about-us .about-prove {
  flex: 1;
  background: #806e22;
  box-shadow: 10px 10px 2px #64592a;
  box-sizing: border-box;
  padding: 20px;
}

.about-us .about-prove ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.about-us .about-prove ul li {
  margin: 20px 0px;
  display: block;
}

.about-us .about-prove a {
  text-decoration: none;
  color: inherit;
}

.about-prove-icon {
  width: 3.5rem;
  height: 3.5rem;
  text-align: center;
  line-height: 3.5rem;
}

.about-prove-icon i {
  font-size: 3rem;
  color: #fff;
}

.about-prove-container {
  display: flex;
  align-items: center;
}

.about-prove-describe {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0px 20px;
  color: #fff;
}

.about-prove-describe h2 {
  margin: 10px 0px;
  /* letter-spacing: 6px; */
}

.about-prove-describe p {
  margin: 0px;
  font-size: 14px;
}

.about-btns {
  margin: 10px 0px;
}

.swiper-fill {
  width: 100%;
  height: 100%;
}

.carousel {
  height: 100vh;
}
</style>